<template>
  <div class="index-container">
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card shadow="hover">
          <div slot="header" class="title">近5年老人数据统计</div>
          <div>
            <vab-chart
              ref="chart1"
              autoresize
              :options="chart1"
              style="width: 100%; height: 370px;"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <el-card shadow="hover">
          <div slot="header" class="title">房间类型统计</div>
          <div>
            <vab-chart
              autoresize
              :options="chart2"
              style="width: 100%; height: 370px;"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <el-card shadow="hover">
          <div slot="header" class="title">入住老人类型统计</div>
          <div>
            <vab-chart
              autoresize
              :options="chart3"
              style="width: 100%; height: 370px;"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">床位看护数据统计</h3>
            <el-dropdown class="fr" @command="handlebedCommand">
              <span class="el-dropdown-link">
                {{bedcommand == '1' ? "今天" : bedcommand == '2' ? '七天' : "一个月"}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">今天</el-dropdown-item>
                <el-dropdown-item command="2">七天</el-dropdown-item>
                <el-dropdown-item command="3">一个月</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <div>
            <vab-chart
              autoresize
              :options="chart4"
              style="width: 100%; height: 370px;"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">卫生间看护数据统计</h3>
            <el-dropdown class="fr" @command="handleCommand">
              <span class="el-dropdown-link">
                {{wccommand == '1' ? "今天" : wccommand == '2' ? '七天' : "一个月"}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">今天</el-dropdown-item>
                <el-dropdown-item command="2">七天</el-dropdown-item>
                <el-dropdown-item command="3">一个月</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart5"
              style="width: 100%; height: 370px;"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title">床位类型统计</div>
          <div>
            <vab-chart
              autoresize
              :options="chart6"
              style="width: 100%; height: 370px;"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import VabChart from "@/plugins/echarts";
  import { getData, getDataYbed, getDataYwc } from "@/api/orderData";
  export default {
    name: "Index",
    components: { VabChart },
    data() {
      return {
        bedcommand: "3",
        wccommand: "3",
        chart1: {
          grid: {
            top: "15%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          legend: {
            right: 0,
            itemWidth: 20,
            itemHeight: 20,
            itemGap: 32, // 设置间距
            icon: "rectangle",
            textStyle: { fontSize: "16px", color: "#fff" },
            data: ["预约登记", "试住老人", "入住老人"],
          },
          xAxis: {
            type: "value",
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: {
            type: "category",
            data: [],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
          },
          series: [
            {
              name: "预约登记",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                color: "#FCD438",
              },
              data: [],
            },
            {
              name: "试住老人",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                color: "#1791FF",
              },
              data: [],
            },
            {
              name: "入住老人",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                color: "#4DCC73",
              },
              data: [],
            },
          ],
        },
        chart2: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: ["单人间", "双人间", "三人间", "多人间"],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "预约登记",
              type: "bar",
              barWidth: 32,
              itemStyle: {
                normal: {
                  //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                  color: function (params) {
                    // build a color map as your need.
                    var colorList = [
                      "#38CBCB",
                      "#4DCC73",
                      "#1791FF",
                      "#FCD438",
                    ];
                    return colorList[params.dataIndex];
                  }, //以下为是否显示，显示位置和显示格式的设置了
                  label: {
                    show: true,
                    position: "top",
                    //                             formatter: '{c}'
                    formatter: "{c}",
                  },
                },
              },
              data: [87, 100, 160, 400, 400],
            },
          ],
        },
        chart3: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          legend: {
            //图例
            orient: "horizontal", //图例的布局，竖直    horizontal为水平
            x: "center", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["自理型", "介助型", "介护型", "特护型"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["50%", "55%"],
              avoidLabelOverlap: false,
              color: ["#1791FF", "#FF8183", "#4DCC73", "#FCD438", "#EA82F1"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                { value: 335, name: "自理型" },
                { value: 310, name: "介助型" },
                { value: 234, name: "介护型" },
                { value: 135, name: "特护型" },
              ],
            },
          ],
        },
        chart4: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局 vertical，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: [
              "呼叫请求",
              "离床报警",
              "尿湿报警",
              "离床预警",
              "无效报警",
            ],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["50%", "55%"],
              avoidLabelOverlap: false,
              color: ["#EA82F1", "#FF787F", "#FFAE67", "#FCD438", "#B1B1B1"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                { value: 335, name: "呼叫请求次数" },
                { value: 310, name: "离床报警次数" },
                { value: 234, name: "尿湿报警次数" },
                { value: 234, name: "离床预警次数" },
                { value: 234, name: "无效报警次数" },
              ],
            }
            // {
            //   name: "Line 5",
            //   type: "pie",
            //   clockWise: true,
            //   hoverAnimation: false,
            //   radius: ["80%", "90%"],
            //   center: ["60%", "50%"],
            //   color: "#EA82F1",
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         show: false,
            //       },
            //       // shadowBlur: 15,
            //       // shadowColor: 'white',
            //     },
            //   },
            //   data: [
            //     {
            //       value: 7645434,
            //       name: "呼叫请求次数",
            //     },
            //     {
            //       value: 3612343,
            //       name: "总数",
            //       tooltip: {
            //         show: false,
            //       },
            //       itemStyle: {
            //         normal: {
            //           color: "rgba(0,0,0,0)",
            //           label: {
            //             show: false,
            //           },
            //           labelLine: {
            //             show: false,
            //           },
            //         },
            //         emphasis: {
            //           color: "rgba(0,0,0,0)",
            //         },
            //       },
            //     },
            //   ],
            // },
            // {
            //   name: "Line 4",
            //   type: "pie",
            //   clockWise: true,
            //   hoverAnimation: false,
            //   radius: ["65%", "75%"],
            //   center: ["60%", "50%"],
            //   color: "#FF787F",
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         show: false,
            //       },
            //       // shadowBlur: 15,
            //       // shadowColor: 'white',
            //     },
            //   },
            //   data: [
            //     {
            //       value: 7645434,
            //       name: "离床报警次数",
            //     },
            //     {
            //       value: 3612343,
            //       name: "总数",
            //       tooltip: {
            //         show: false,
            //       },
            //       itemStyle: {
            //         normal: {
            //           color: "rgba(0,0,0,0)",
            //           label: {
            //             show: false,
            //           },
            //           labelLine: {
            //             show: false,
            //           },
            //         },
            //         emphasis: {
            //           color: "rgba(0,0,0,0)",
            //         },
            //       },
            //     },
            //   ],
            // },
            // {
            //   name: "Line 3",
            //   type: "pie",
            //   clockWise: true,
            //   radius: ["50%", "60%"],
            //   center: ["60%", "50%"],
            //   color: "#FFAE67",
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         show: false,
            //       },
            //       // shadowBlur: 15,
            //       // shadowColor: 'white',
            //     },
            //   },
            //   hoverAnimation: false,

            //   data: [
            //     {
            //       value: 2632321,
            //       name: "尿湿报警次数",
            //     },
            //     {
            //       value: 2212343,
            //       name: "总数",
            //       tooltip: {
            //         show: false,
            //       },
            //       itemStyle: {
            //         normal: {
            //           color: "rgba(0,0,0,0)",
            //           label: {
            //             show: false,
            //           },
            //           labelLine: {
            //             show: false,
            //           },
            //         },
            //         emphasis: {
            //           color: "rgba(0,0,0,0)",
            //         },
            //       },
            //     },
            //   ],
            // },
            // {
            //   name: "Line 2",
            //   type: "pie",
            //   clockWise: true,
            //   hoverAnimation: false,
            //   radius: ["35%", "45%"],
            //   center: ["60%", "50%"],
            //   color: "#FCD438",
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         show: false,
            //       },
            //       // shadowBlur: 15,
            //       // shadowColor: 'white',
            //     },
            //   },
            //   data: [
            //     {
            //       value: 1823323,
            //       name: "离床预警次数",
            //     },
            //     {
            //       value: 1812343,
            //       name: "总数",
            //       tooltip: {
            //         show: false,
            //       },
            //       itemStyle: {
            //         normal: {
            //           color: "rgba(0,0,0,0)",
            //           label: {
            //             show: false,
            //           },
            //           labelLine: {
            //             show: false,
            //           },
            //         },
            //         emphasis: {
            //           color: "rgba(0,0,0,0)",
            //         },
            //       },
            //     },
            //   ],
            // },
            // {
            //   name: "Line 1",
            //   type: "pie",
            //   clockWise: true,
            //   color: "#B1B1B1",
            //   radius: ["20%", "30%"],
            //   center: ["60%", "50%"],
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         show: false,
            //       },
            //       // shadowBlur: 15,
            //       // shadowColor: 'white',
            //     },
            //   },
            //   hoverAnimation: false,

            //   data: [
            //     {
            //       value: 1342221,
            //       name: "无效报警次数",
            //     },
            //     {
            //       value: 1912343,
            //       name: "总数",
            //       tooltip: {
            //         show: false,
            //       },
            //       itemStyle: {
            //         normal: {
            //           color: "rgba(0,0,0,0)",
            //           label: {
            //             show: false,
            //           },
            //           labelLine: {
            //             show: false,
            //           },
            //         },
            //         emphasis: {
            //           color: "rgba(0,0,0,0)",
            //         },
            //       },
            //     },
            //   ],
            // },
          ],
        },
        chart5: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局 vertical，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["紧急呼叫", "跌倒报警", "无效报警"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["50%", "55%"],
              avoidLabelOverlap: false,
              color: ["#EA82F1", "#FF787F", "#B1B1B1"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                { value: 335, name: "紧急呼叫次数" },
                { value: 310, name: "跌倒报警次数" },
                { value: 234, name: "无效报警次数" },
              ],
            }
            // {
            //   name: "Line 5",
            //   type: "pie",
            //   clockWise: true,
            //   hoverAnimation: false,
            //   radius: ["80%", "90%"],
            //   center: ["60%", "50%"],
            //   color: "#EA82F1",
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         show: false,
            //       },
            //       // shadowBlur: 15,
            //       // shadowColor: 'white',
            //     },
            //   },
            //   data: [
            //     {
            //       value: 7645434,
            //       name: "紧急呼叫次数",
            //     },
            //     {
            //       value: 3612343,
            //       name: "总数",
            //       tooltip: {
            //         show: false,
            //       },
            //       itemStyle: {
            //         normal: {
            //           color: "rgba(0,0,0,0)",
            //           label: {
            //             show: false,
            //           },
            //           labelLine: {
            //             show: false,
            //           },
            //         },
            //         emphasis: {
            //           color: "rgba(0,0,0,0)",
            //         },
            //       },
            //     },
            //   ],
            // },
            // {
            //   name: "Line 4",
            //   type: "pie",
            //   clockWise: true,
            //   hoverAnimation: false,
            //   radius: ["65%", "75%"],
            //   center: ["60%", "50%"],
            //   color: "#FF787F",
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         show: false,
            //       },
            //       // shadowBlur: 15,
            //       // shadowColor: 'white',
            //     },
            //   },
            //   data: [
            //     {
            //       value: 7645434,
            //       name: "跌倒报警次数",
            //     },
            //     {
            //       value: 3612343,
            //       name: "总数",
            //       tooltip: {
            //         show: false,
            //       },
            //       itemStyle: {
            //         normal: {
            //           color: "rgba(0,0,0,0)",
            //           label: {
            //             show: false,
            //           },
            //           labelLine: {
            //             show: false,
            //           },
            //         },
            //         emphasis: {
            //           color: "rgba(0,0,0,0)",
            //         },
            //       },
            //     },
            //   ],
            // },
            // {
            //   name: "Line 1",
            //   type: "pie",
            //   clockWise: true,
            //   color: "#B1B1B1",
            //   radius: ["50%", "60%"],
            //   center: ["60%", "50%"],
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         show: false,
            //       },
            //       // shadowBlur: 15,
            //       // shadowColor: 'white',
            //     },
            //   },
            //   hoverAnimation: false,

            //   data: [
            //     {
            //       value: 1342221,
            //       name: "无效报警次数",
            //     },
            //     {
            //       value: 1912343,
            //       name: "总数",
            //       tooltip: {
            //         show: false,
            //       },
            //       itemStyle: {
            //         normal: {
            //           color: "rgba(0,0,0,0)",
            //           label: {
            //             show: false,
            //           },
            //           labelLine: {
            //             show: false,
            //           },
            //         },
            //         emphasis: {
            //           color: "rgba(0,0,0,0)",
            //         },
            //       },
            //     },
            //   ],
            // },
          ],
        },
        chart6: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局 vertical，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["护理三人间", "护理床/介助型", "护理床双人间", "摇床/介护型", "智能护理床/全护型", "木床/自理型"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["50%", "55%"],
              avoidLabelOverlap: false,
              color: ["#1791FF", "#FF8183", "#4DCC73", "#FCD438", "#EA82F1", "#5DEC86"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                { value: 335, name: "护理三人间" },
                { value: 310, name: "护理床/介助型" },
                { value: 234, name: "护理床双人间" },
                { value: 135, name: "摇床/介护型" },
                { value: 135, name: "智能护理床/全护型" },
                { value: 135, name: "木床/自理型" },
              ],
            }
          ],
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
      this.getDataYbed(3);
      this.getDataYwc(3)
    },
    methods: {
      getDataYbed(time) {
        getDataYbed({time}).then(res => {
          let bedData = [];
          if(res.data && res.data.length != 0){
            for(let key in res.data) {
              bedData.push({
                name: key,
                value: res.data[key]
              })
            }
            this.chart4.series[0].data = bedData;
          } else{
            this.chart4.series[0].data = []
          }
        })
      },
      getDataYwc(time){
        getDataYwc({time}).then(res => {
          let bedwcData = [];
          if(res.data && res.data.length != 0){
            for(let key in res.data) {
              bedwcData.push({
                name: key,
                value: res.data[key]
              })
            }
            this.chart5.series[0].data = bedwcData;
          } else{
            this.chart5.series[0].data = []
          }
        })
      },
      getTableData() {
        getData().then((resp) => {
          if (resp.code === 200) {
            let xAxisData1 = [];
            let elderData = [];
            let reserveData = [];
            let tryData = [];
            for (
              let index = 0;
              index < resp.data.elder[0].length,
                index < resp.data.reserve[0].length,
                index < resp.data.try[0].length;
              index++
            ) {
              const element = resp.data.elder[0][index];
              const element1 = resp.data.reserve[0][index];
              const element2 = resp.data.try[0][index];
              xAxisData1.push(Object.keys(element)[0]);
              elderData.push(Object.values(element)[0]);
              reserveData.push(Object.values(element1)[0]);
              tryData.push(Object.values(element2)[0]);
            }
            this.chart1.yAxis.data = xAxisData1;
            this.chart1.series[2].data = elderData;
            this.chart1.series[0].data = reserveData;
            this.chart1.series[1].data = tryData;
            let elderTypeData = [];
            let xAxisData3 = [];
            for (
              let index = 0;
              index < resp.data.elder_type[0].length;
              index++
            ) {
              let temp = {};
              const element = resp.data.elder_type[0][index];
              xAxisData3.push(Object.keys(element)[0]);
              temp.name = Object.keys(element)[0];
              temp.value = Object.values(element)[0];
              elderTypeData.push(temp);
            }
            console.log(xAxisData3);
            this.chart3.legend.data = xAxisData3;
            this.chart3.series[0].data = elderTypeData;
            let bed_typeData = [];
            for(let key in resp.data.bed_type){
              bed_typeData.push({
                name: key,
                value: Number(resp.data.bed_type[key])
              })
            }
            this.chart6.series[0].data = bed_typeData;
          }
        });
      },
      handleCommand(command) {
        this.getDataYwc(command)
        this.wccommand = command;
      },
      handlebedCommand(command) {
        this.getDataYbed(command)
        this.bedcommand = command;
      }
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    background: #001e44 !important;

    .el-card {
      background: none;
      background: rgba($color: #fff, $alpha: 0.1);
      border-color: #00e4ff;

      ::v-deep {
        .el-card__header {
          border-bottom: 1px solid #00e4ff;
        }
      }

      .title {
        font-size: 18px;
        color: #fff;
        cursor: pointer;

        h3 {
          font-weight: normal;
        }
      }

      .el-dropdown-link {
        font-size: 16px;
        color: #fff;
      }
    }
  }
</style>
